import './index.scss';
import { Button, Space,Modal,Form,Input,Select,Radio,Upload} from 'antd';
import React, { useState,Navigate } from 'react';


const AuthorOption=()=>{
    const [isAddOpen, setisAddOpen] = useState(false);//新增模态框
    const [isFreeOpen, setisFreeOpen] = useState(false);//冻结确认模态框
    const [isThawOpen, setisThawOpen] = useState(false);//解冻确认模态框
    const [isDelOpen, setisDelOpen] = useState(false);//删除确认模态框
    
    //新增模态框
    const addAuthor=()=>{
        console.log('新增')
        setisAddOpen(true);
    }
    const AddOk = () => {
        console.log("模态框确认")
        setisAddOpen(false);
    };
    const AddCancel = () => {
        console.log("取消")
        setisAddOpen(false);
    };
    //冻结确认模态框
    const freezeAuthor=()=>{
        console.log('冻结')
    }
    //解冻确认模态框
    const thawAuthor=()=>{
        console.log('解冻')
    }
    //删除确认模态框
    const delAuthor=()=>{
        console.log('删除')
    }
    return <div className='optionBox'>
        <Space size={'large'}>
            <Button type='primary' className='btnStyle' onClick={addAuthor}>新增</Button>
            <Button className='btnStyle' onClick={freezeAuthor}>冻结</Button>
            <Button type='primary' className='btnStyle' onClick={thawAuthor}>解冻</Button>
            <Button className='btnStyle' onClick={delAuthor}>删除</Button>
        </Space>
        {/*新增弹框*/}
        <Modal title="添加作者"
            open={isAddOpen} 
            onOk={AddOk} 
            onCancel={AddCancel}
            okText="保存"
            cancelText="取消">
            <Form name="addAuthor" 
            labelCol={{span:4}}>
                <Form.Item
                    name="APP"
                    label="APP"
                    
                    rules={[
                        {
                            required: true,
                            message: '请选择APP',
                        },
                    ]}
                    >
                    <Radio.Group
                        optionType="button"
                        buttonStyle="solid">
                        <Radio.Button value="小黑早教">小黑早教</Radio.Button>
                        <Radio.Button value="小黑绘本">小黑绘本</Radio.Button>
                    </Radio.Group>
                </Form.Item>
                <Form.Item
                    name='picture'
                    label="头像"
                    rules={[{ required: true, message: '请选择头像'}]}
                    >
                    <Upload
                        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                        listType="picture"
                        maxCount={1}
                        >
                        <Button >选择头像</Button>
                    </Upload>
                </Form.Item>
                <Form.Item
                    name="name"
                    label="名称"
                    rules={[{ required: true, message: '输入的作者名称不合法', whitespace: true }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="status"
                    label="状态"
                    rules={[
                        {
                            required: true,
                            message: '请选择作者的状态',
                        },
                    ]}
                    >
                    <Radio.Group
                        optionType="button"
                        buttonStyle="solid">
                        <Radio.Button value="正常">正常</Radio.Button>
                        <Radio.Button value="冻结">冻结</Radio.Button>
                    </Radio.Group>
                </Form.Item>
                <Form.Item
                    name="des"
                    label="介绍"
                    rules={[{ required: true, message: '请输入介绍内容' }]}
                >
                    <Input.TextArea showCount maxLength={200} />
                </Form.Item>
            </Form>
        </Modal>
    </div>
}
export default AuthorOption;